<form name="form">
  <h3>{{ 'EXECUTION_METRICS' | translate }}</h3>

  <div uib-alert class="alert alert-info">
    <p>
      {{ 'EXECUTION_METRICS_INFO_1' | translate }} 
          <strong>{{ 'EXECUTION_METRICS_FNI' | translate }}</strong>, 
          <strong>{{ 'EXECUTION_METRICS_EDE' | translate }}</strong>, 
          <strong>{{ 'EXECUTION_METRICS_RPI' | translate }}</strong> {{ 'EXECUTION_METRICS_AND' | translate }}
          <strong>{{ 'EXECUTION_METRICS_DI' | translate }}</strong> 
      {{ 'EXECUTION_METRICS_INFO_2' | translate }}
    </p>
  </div>

  <div class="row">
    <div class="form-group col-xs-12 col-sm-6">
      <label for="startDate">
        {{ 'EXECUTION_METRICS_START_DATE' | translate }}
      </label>
      <input type="text"
             name="startDate"
             ng-model="startDate"
             ng-required="true"
             ng-change="handleDateChange()"
             class="form-control"
             id="startDate"
             date />
    </div>

    <div class="form-group col-xs-12 col-sm-6">
      <label for="endDate">
        {{ 'EXECUTION_METRICS_END_DATE' | translate }}
      </label>
      <input type="text"
             name="endDate"
             ng-model="endDate"
             ng-change="handleDateChange()"
             ng-required="true"
             class="form-control"
             id="endDate"
             date />
    </div>
  </div>


  <div cam-widget-loader
       loading-state="{{ loadingState }}"
       text-error="{{ loadingError }}">
    <div class="panel panel-default">
      <div class="panel-heading">{{ 'EXECUTION_METRICS_RESULTS' | translate }}</div>
      <div class="panel-body">
        <ul>
          <li>
            <strong>{{ metrics.flowNodes.toLocaleString() }}</strong> {{ 'EXECUTION_METRICS_FNI' | translate }}
          </li>
          <li>
            <strong>{{ metrics.decisionElements.toLocaleString() }}</strong> {{ 'EXECUTION_METRICS_EDE' | translate }}
          </li>
          <li>
            <strong>{{ metrics.rootProcessInstances.toLocaleString() }}</strong> {{ 'EXECUTION_METRICS_RPI' | translate }}
          </li>
          <li>
            <strong>{{ metrics.decisionInstances.toLocaleString() }}</strong> {{ 'EXECUTION_METRICS_DI' | translate }}
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="text-right"
       ng-show="loadingState !== 'INITIAL'">
    <button type="submit"
            ng-disabled="!form.$valid || loadingState === 'LOADING'"
            class="btn btn-default"
            ng-click="load()">
      {{ 'EXECUTION_METRICS_REFRESH' | translate }}
    </button>
  </div>

</form>
